<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>requestAnimation</title>
</head>

<body>
  <div id="rect" style="width:80px;height: 36px;border: 1px dotted red;"></div>
  <script>



    class Task {

      constructor() {
        this.start = null;
        this.taskStack = [];
      }
      add(stack) {
        this.taskStack.push(stack);
      }
      // draw() {
      //   window.requestAnimationFrame(function () {
      //     if (this.taskStack.length) {
      //       var task = this.taskStack.shift();
      //       task();
      //     }
      //     window.requestAnimationFrame(this.draw);
      //   });
      // }
      draw(timestamp) {
        console.log(this);
        if (!this.start) {

          this.start = timestamp;
        }
        const elapsed = timestamp - this.start;

        // 这里使用`Math.min()`确保元素刚好停在200px的位置。
        element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

        if (elapsed < 2000) { // 在两秒后停止动画
          window.requestAnimationFrame(task.draw);
        }
      }
    }

    const element = document.getElementById("rect");
    let start;

    // 使用es6
    // var task = new Task();
    // window.requestAnimationFrame(task.draw);

    // 使用es5
    function step(timestamp) {
      console.log(timestamp);
      if (start === undefined) {

        start = timestamp;
      }
      const elapsed = timestamp - start;

      //这里使用`Math.min()`确保元素刚好停在200px的位置。
      element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

      if (elapsed < 2000) { // 在两秒后停止动画
        window.requestAnimationFrame(step);
      }
    }
    window.requestAnimationFrame(step);
  </script>
</body>

</html>
